<script setup name="Main">
import HorizontalBar from "@/components/HorizontalBar.vue";
import RadarBar from "@/components/RadarBar.vue";
import Relation from "@/components/Relation.vue";
import TotalData from "@/components/TotalData.vue";
import MapChart from "@/components/MapChart.vue";
import VerticalBar from "@/components/VerticalBar.vue";
import RadiueBar from "@/components/RadiueBar.vue";
import WordCloud from "@/components/WordCloud.vue";
import { getVisualization } from "@/api/visualization";
// 屏幕适配
import useScale from "@/mixin/useScale.js";
import { ref } from "vue";
const { appRef } = useScale();

const visualData = ref(null);
const getData = () => {
  getVisualization().then((res) => {
    console.log(res);
    visualData.value = res;
  });
};

getData();

setInterval(() => {
  getData();
}, 3000);
</script>

<template>
  <!-- 使用tailwindcss -->
  <div
    class="bg-[url('assets/imgs/bg.jpg')] bg-cover bg-center h-screen text-white p-5 flex overflow-hidden visual-container"
    v-if="visualData"
    ref="appRef"
  >
    <!-- 左边 -->
    <div class="flex-1 mr-5 bg-opacity-50 bg-slate-800 p-3 flex flex-col">
      <!-- 横向柱状图 -->
      <HorizontalBar
        class="h-1/3 box-border pb-4"
        :data="visualData.regionData"
      />
      <!-- 雷达图 -->
      <RadarBar class="h-1/3 box-border pb-4" :data="visualData.riskData" />
      <!-- 数据传递关系图 -->
      <Relation class="h-1/3" :data="visualData.relationData" />
    </div>
    <!-- 中间 -->
    <div class="w-1/2 mr-5 flex flex-col">
      <!-- 数据展示图 -->
      <TotalData
        class="bg-opacity-50 bg-slate-800 p-3"
        :data="visualData.totalData"
      />
      <!-- 地图可视化 -->
      <MapChart
        class="bg-opacity-50 bg-slate-800 p-3 mt-4 flex-1"
        :data="visualData.mapData"
      />
    </div>
    <!-- 右边 -->
    <div class="flex-1 bg-opacity-50 bg-slate-800 p-3 flex flex-col">
      <!-- 竖向柱状图 -->
      <VerticalBar
        class="h-1/3 box-border pb-4"
        :data="visualData.serverData"
      />
      <!-- 环形资源站比图 -->
      <RadiueBar
        class="h-1/3 box-border pb-4"
        :data="visualData.abnormalData"
      />
      <!-- 文档云图 -->
      <WordCloud class="h-1/3 box-border" :data="visualData.wordCloudData" />
    </div>
  </div>
</template>
<style  scoped>
.visual-container {
  width: 1920px;
  height: 1080px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: left top;
  overflow: hidden;
}
</style>
